<script setup lang="ts">
import { getUserInfoApi, loginApi, regApi } from "@/apis/user"
import { ElMessage, type FormRules } from "element-plus"
import { reactive, ref, watch } from "vue"
import { useRouter } from "vue-router"
import { useUserStore } from "@/stores/user"
const router = useRouter()
const userStore = useUserStore()
// 定义表单数据
const loginData = ref({
  username: "",
  password: "",
})
// 表单dom
const ruleFormRef = ref()
// 表单验证规则
const rules = reactive<FormRules>({
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
})

// 当前登录卡片的状态,reg和login
const props = defineProps({
  cardStatus: {
    type: String,
    default: "login",
  },
})
// 向外传递当前卡片状态
const emit = defineEmits(['send-status'])
const changeStatus = () => {
  emit('send-status', 'login')
}
const regMehod = async () => {
  const res = await regApi(loginData.value)
  if (res.status !== 200) {
    return ElMessage({
      message: res.message,
      type: 'error'
    })
  }
  // 注册成功,清空输入框内容,转回登录状态
  clearInput()
  changeStatus()
  ElMessage({
    message: res.message,
    type: 'success'
  })
}
// 登录方法，向外暴露
const login = () => {
  // @ts-ignore
  ruleFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      // 校验表单成功,调用登录接口
      const res = await loginApi(loginData.value)
      if (res.status !== 200) {
        return ElMessage({
          message: res.message,
          type: 'error'
        })
      }
      // 登录成功
      ElMessage({
        message: res.message,
        type: 'success'
      })
      // 将token存入pina
      userStore.setUserToken(res.data.token)
      // 获取用户个人信息
      await getUserInfo()

      // 跳转到首页
      router.push({
        path: '/'
      })
    }
  })
}
// 获取用户信息方法
const getUserInfo = async () => {
  const res = await getUserInfoApi()
  if (res.status !== 200) {
    return ElMessage({
      message: res.message,
      type: 'error'
    })
  }
  // 获取成功存入pina仓库
  userStore.setUserInfo(res.data)
  console.log(userStore.userInfo)
}
// 清空输入框方法
const clearInput = () => {
  loginData.value = {
    username: '',
    password: ''
  }
}

defineExpose({
  login,
  clearInput
})
</script>

<template>
  <!-- 登录和注册卡片 -->
  <div v-if="cardStatus == 'login'" class="bg-white w-xl h-120 shadow-xl rounded-md flex flex-col items-center pt-10">
    <!-- 顶部标题 -->
    <div class="font-extrabold text-4xl mb-5">登录</div>
    <!-- 输入框 -->
    <div class="mb-5">
      <el-form style="max-width: 600px" status-icon label-width="auto" :model="loginData" ref="ruleFormRef"
        :rules="rules">
        <el-form-item label="账号" prop="username">
          <el-input type="text" v-model="loginData.username" />
        </el-form-item>
        <el-form-item label="密码" class="w-100 mt-5" prop="password">
          <el-input type="password" show-password v-model="loginData.password" />
        </el-form-item>
      </el-form>
    </div>
    <slot>
      <!-- 登录注册按钮插槽 -->
    </slot>
  </div>

  <!-- 注册界面 -->
  <div v-else class="bg-white w-xl h-120 shadow-xl rounded-md flex flex-col items-center pt-10">
    <!-- 顶部标题 -->
    <div class="font-extrabold text-4xl mb-5">注册账号</div>
    <!-- 输入框 -->
    <div class="mb-5">
      <el-form style="max-width: 600px" status-icon label-width="auto" :model="loginData" ref="ruleFormRef"
        :rules="rules">
        <el-form-item label="账号" prop="username">
          <el-input type="text" v-model="loginData.username" />
        </el-form-item>
        <el-form-item label="密码" class="w-100 mt-5" prop="password">
          <el-input type="password" show-password v-model="loginData.password" />
        </el-form-item>
      </el-form>
    </div>
    <el-button type="primary" class="w-80 h-45" @click="regMehod">确认注册</el-button>
    <el-button type="success" class="w-80 h-45 mt-5" @click="changeStatus">返回</el-button>
  </div>
</template>

<style scoped>
.el-button+.el-button {
  margin-left: 0;
}
</style>
